<!--
  Copyright (c) 2011 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://www.apache.org/licenses/LICENSE-2.0.html
-->
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Marker Animations</title> 
<style> 
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas {
    height:420px;
  }
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var marker;
 
  function initialize() {
    var markers = [];
 
    var orlando = new google.maps.LatLng(28.538537,-81.377621);
    var mapOptions = {
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: orlando
    };
 
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
 
    function drop5() {
      var sw = map.getBounds().getSouthWest();
      var ne = map.getBounds().getNorthEast();
      for (var i = 0; i < 5; i++) {
        setTimeout(function() {
          var lat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
          var lng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
          markers.push(new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP
          }));
        }, i * 200);
      }
    }
    document.getElementById("drop5").onclick = drop5;
 
    document.getElementById("bounce").onclick = function() {
      for (var i = 0; i < markers.length; i++) {
        markers[i].setAnimation(google.maps.Animation.BOUNCE);
      }
    };
 
    document.getElementById("stop").onclick = function() {
      for (var i = 0; i < markers.length; i++) {
        markers[i].setAnimation(null);
      }
    };
 
    google.maps.event.addListenerOnce(map, 'tilesloaded', drop5);
  }
</script> 
</head> 
<body onload="initialize()" style="font-family: sans-serif; font-size: 14px;"> 
<div id="map_canvas"></div>
<p style="margin-top: 5px"> 
  <button id="drop5">Drop 5!</button> 
  <button id="bounce">Make 'em bounce!</button> 
  <button id="stop">Stop!</button> 
  ...and try dragging one!
</p> 
</body> 
</html> 